<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./作业样式.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./font_0b4llsqt7hg/iconfont.css">
</head>
<body>
    <div class="box">
        <div class="son">
            精品推荐 <span class="iconfont icon-chakansuoyou">修改兴趣</span>
            <span class="iconfont icon-zhongguoyouzheng"></span>
            <span class="iconfont icon-status-6"></span>
            <span class="iconfont icon-sanguosha"></span>
        </div>
        <ul>
            <!-- <li> -->
                <!-- <img src="./保时捷.jpg">
                <p class="aaa">Think PHP 5.0 博客系统实战项目演练</p>
                <p class="bbb">高级&nbsp;&nbsp;<span>·1125人在学习</span></p> -->
            <!-- </li> -->
        </ul>
    </div>
</body>
</html>
<script>
    var data=[{
        'tb':'./保时捷.jpg',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./保时捷2.webp',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./劳斯莱斯.jpeg',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./蔡徐坤.webp',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./红旗.png',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./吴亦凡.webp',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./红旗.png',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./劳斯莱斯.jpeg',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./保时捷2.webp',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    },{
        'tb':'./保时捷.jpg',
        'sm':'Think PHP 5.0 博客系统实战项目演练',
        'rs':1125
    }
    ];
    var ul=document.querySelector('ul')
    //循环遍历数组
    for(i=0;i<data.length;i++){
        var li=document.createElement('li')
        //创建
        //赋值 字符串模版 超级字符串
        li.innerHTML=`
                <img src="${data[i].tb}">
                <p class="aaa">${data[i].sm}</p>
                <p class="bbb">高级&nbsp;&nbsp;<span>·${data[i].rs}人在学习</span></p>
        `;
        //添加
        ul.appendChild(li)
    }
</script>